<template>
    <div id='' class=''>
        <i-form ref="menuForm" :config="configMenu" style="margin-top: -62px;">
            <template #icon="rowData">
                <i-icon-select v-model="icon" />
            </template>
            <template #backgroundDocId="rowData">
                <div v-if="file.length !== 0" class="imgShow">
                    <img :src="showImgPath" alt="" srcset="" style="width:200px;height:200px;">
                    <Icon type="ios-close-circle" class="icon_close" size="24" color="#ff9900" @click="removeImg" />
                </div>
                <Upload v-else :show-upload-list="false" multiple type="drag" action="" :before-upload="beforeUpload">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击或拖拽文件上传,文件大小不能超过500KB</p>
                    </div>
                </Upload>
            </template>
            <template #floorIcon="rowData">
                <i-icon-select v-model="floorIcon" />
            </template>
        </i-form>
    </div>
</template>
<script>
import { configMenu } from './form_config'
import { mapState, mapActions } from 'vuex'
export default {
    name: '',
    props: ['isInit'],
    data() {
        this.cm = icu.util.deepClone(configMenu)
        return {
            configMenu: this.cm,
            floorIcon: '', // 工作台图标
            icon: '', // 图标
            file: [], // 应用场景附件信息
            showImgPath: ''
        };
    },
    components: {},
    computed: {
        ...mapState('extend/sysMenu', ['$row'])
    },
    beforeMount() { },
    created() { },
    mounted() {
        this.$fileApi = this.$Api.get(['common:upload'])
        if (this.isInit) {
            this.getUpMenuList(null);
        }
        this.getToMenuList();
    },
    methods: {
        reset() {
            this.floorIcon = '' // 工作台图标
            this.icon = '' // 图标
            this.file = [] // 应用场景附件信息
            this.showImgPath = ''
            this.$refs.menuForm.reset('menuForm')
            if (this.isInit) {
                this.getUpMenuList(null);
            }
        },
        setUpMenu(row) {
            this.$nextTick(() => {
                this.$refs.menuForm.setData({
                    pid: this.$row.pid == null ? '0' : this.$row.id,
                    subsystemId: this.$row.subsystemId
                })
            })
        },
        init(data) {
            if (data) {
                this.clickRow = data
            }
            this.getUpMenuList(data.id, () => {
                this.$refs.menuForm.setData(data)
                this.icon = data.icon;
                this.floorIcon = data.floorIcon;
                if (data.backgroundDocId) {
                    if (data.document) {
                        this.file.push({ id: data.backgroundDocId })
                        this.showImgPath = window.config.fileServer + 'show/' + `${data.document.minioPath}`
                    }
                }
            });
        },
        getUpMenuList(id, cb) {
            this.$http.$get('topTreeList', { params: {} }).then(res => {
                if (res.code == 200) {
                    for (let i = 0; i < this.configMenu.form.length; i++) {
                        const element = this.configMenu.form[i];
                        if (element.key == 'pid') {
                            element['disabled'] = true
                            element.data = res.data
                        }
                        if (element.key == 'subsystemId') {
                            element['disabled'] = true
                        }
                    }
                    if (cb) {
                        cb()
                    }
                    return
                }
                this.$Message.error(res.msg)
            })
        },
        getToMenuList() {
            this.$http.$get('subsystemList', { params: {} }).then(res => {
                if (res.code == 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        const element = res.data[i];
                        element['label'] = element.title
                    }
                    for (let i = 0; i < this.configMenu.form.length; i++) {
                        const element = this.configMenu.form[i];
                        if (element.key == 'subsystemId') {
                            element.option = res.data
                        }
                    }
                    return
                }
                this.$Message.error(res.msg)
            })
        },
        beforeUpload(response) {
            // response.size 单位是 b 字节
            if (response.size > 500 * 1024) {
                this.$Message.warning('文件  ' + response.name + ' 太大，上传文件大小不能超过500kb.');
                return
            }
            this.$fileApi.fileUpload(response, (res) => {
                if (res.code == 200) {
                    this.showImgPath = config.fileServer + 'show/' + `${res.data[0].minioPath}`
                    this.file = res.data;
                    return
                }
                this.$Message.error(res.msg)
            })
        },
        getForm(cb) {
            let formData = {}
            this.$refs.menuForm.submit('menuForm', (res) => {
                let returnObj = {
                    name: res.name,
                    pid: res.pid,
                    subsystemId: res.subsystemId,
                    route: res.route,
                    sort: res.sort,
                    permissions: res.permissions,
                    icon: this.icon,
                    remarks: res.remarks,
                    backgroundDocId: this.file.length == 0 ? '' : this.file[0].id,
                    floorIcon: this.floorIcon,
                    floorRemarks: res.floorRemarks,
                    hideSider: res.hideSider,
                    isCached: res.isCached,
                    id: res.id ? res.id : ''
                }
                formData = returnObj
            })
            return formData
        },
        removeImg() {
            this.file = []
            this.showImgPath = ''
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.imgShow {
    position: relative;
    width: 200px;
    height: 200px;
}

.imgShow .icon_close {
    position: absolute;
    right: 0px;
    top: 0px;
}
</style>